<template>
  <view class="flex-col page">
    <view class="flex-col flex-auto group_2 space-y-31">
      <view class="flex-col">
        <text class="self-start font_2 text_5">基础资料</text>
        <view class="flex-row justify-between items-center section">
          <view class="flex-row items-center space-x-18">
            <image class="shrink-0 image_5" src="../../static/images/3f7dd0e3bebcf4b2f4c2bc017a203930.png" />
            <text class="font_3">头像</text>
          </view>
          <image class="image_6" @click="changeimage()" :src="headsculpture" />
        </view>
        <view class="flex-row justify-between items-center section_2 ">
          <view class="flex-row items-center space-x-20">
            <image class="shrink-0 image_5" src="../../static/images/d9d64bffb1403fa8c5c1db8587d4991f.png" />
            <text class="font_3">昵称</text>
          </view>
		  <div class="input-container">
		    <input class="font_4" v-model="nickname" @click="modifynickname()" @blur="saveNickname()"/>
		  </div>
        </view>
        <view class="flex-col group_4">
          <text class="self-start font_2 text_8">账号绑定</text>
          <view class="flex-row justify-between items-center section_4">
			   <image class="shrink-0 image_5" src="../../static/images/weixin.png" />
            <view class="flex-col items-center space-y-6 pos">
              <text class="font_3">微信账号</text>
              <text class="font_2 text_9" v-show="showUpImg" >已绑定</text>
			  <text class="font_2 text_9" v-show="!showUpImg">未绑定</text>
            </view>
			<evan-switch v-model="checked":beforeChange="beforeChangePromise" @change="switchChange()" activeColor="#008B8B" inactive-color="#EDEDED" style="zoom:.6"></evan-switch>
          </view>
        </view>
      </view>
      <view class="flex-col space-y-4">
        <text class="self-start font_2 text_10">密保资料</text>
        <view class="flex-col">
		  <view class="flex-row justify-between items-center section_5">
		    <view class="flex-row items-center space-x-6">
		      <image class="shrink-0 image_5" src="../../static/images/d8c5ca3e822653e8c0d842bd1375e5b7.png" />
		      <text class="font_3">手机号</text>
		    </view>
			<text class="font_4 text_11">{{ userinfo.account_user ? userinfo.account_user.substring(0, 3) + '****' + userinfo.account_user.substring(7) : '' }}</text>
		  </view>
		  <view class="flex-row justify-between items-center section_5">
		    <view class="flex-row items-center space-x-6">
		      <image class="shrink-0 image_5" src="../../static/images/019289ff2d46691bb9ef225e8884b3dc.png" />
		      <text class="font_3">注册时间</text>
		    </view>
			<text class="font_4 text_11">{{ dateFormat(userinfo.registertime_user) }}</text>
		  </view>
        </view>
      </view>
	  <text class="self-center text_13" @click="navTo('/pages/paschange/paschange')">修改密码</text>
    </view>
  </view>
</template>

<script>
  import {_getuserinfo} from "@/service/user.js"
  //修改账号信息：如昵称
  import {_modifyname} from "@/service/user.js"
  export default {
    components: {},
    data() {
      return {
		checked:true,
		mlist_lIjKrOTp: [{nickname:''}, {name:''}, {gender:''}],
		showUpImg:true,
		userinfo:{},
		accountNum:'',
		password:'',
		nickname:'',
		imgList: [], //图片路径
		imgFileList: [], //图片文件
		imgNum: 1,
		image:'',
		headsculpture:''//头像
      };
    },
	onLoad(){
		let newdata;
		try {
			const value = uni.getStorageSync('userInfo');
			if (value != null) {
				this.accountNum = value.accountNum,
				this.password = value.password
			}
		} catch (e) {
			console.error(e);
		}
	},
	onShow() {
		this.init();
	},
    methods: {
		dateFormat(registertime) {
		    let date = new Date(registertime);
		    let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
		    return year + "-" + month + "-" + day;
		},
		switchChange(){
			this.showUpImg=!this.showUpImg
		},
		beforeChange(e) {
				uni.showToast({
					title: '开关切换被拦截'
				})
				return false
				
			},
		beforeChangePromise(e) {
			return new Promise((resolve, reject) => {
				uni.showModal({
					title: '提示',
					content: `你确定要${e?'绑定':'解除绑定'}吗`,
					success: (res) => {
						if (res.confirm) {
							resolve()
						} else if (res.cancel) {
							reject()
						}
					}
				})
			})
		},
		async init(){
			let data = {
				account_user:this.accountNum,
				password_user:this.password
			}
			let res = await _getuserinfo(data);
			console.log(res.data);
			this.userinfo = res.data
			this.nickname=this.userinfo.nickname_user
			this.headsculpture=this.userinfo.photo_user
		},
		navTo(url){
			uni.navigateTo({
				url
			});
		},
		modifynickname(){
			
		},
		//修改昵称
		async saveNickname(){
			let data={
				account_user:this.userinfo.account_user,
				nickname_user:this.nickname
			}
			let res=await _modifyname(data);
			console.log(res.data);
		},
		changeimage(){
			this.ifShow = false;
			let s = this.imgNum - this.imgList.length;
			//打开本地相册选择图片
			uni.chooseImage({
				count: s,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					console.log(res);
					if (s >= res.tempFilePaths.length) {
						for (let v of res.tempFilePaths) {
							this.imgList.push(v);
						}
						for (let v of res.tempFiles) {
							this.imgFileList.push(v);
						}
					}
					this.uploadImage()
				},
			});
		},
		async uploadImage() {
		  try {
		    const imgFile = this.imgFileList[0]; // 获取第一张图片
		    const tempFilePath = imgFile.path;
		
		    const [error, res] = await uni.uploadFile({
		      url: 'http://43.142.102.167:8088/common/image',
		      filePath: tempFilePath,
		      name: 'image',
		      formData: {
		        shopTalkNumber: 1 // 上传一张图片时设置数量为1
		      }
		    });
		
		    if (error) {
		      throw new Error(error);
		    }
		
		    console.log(res.data); // 上传成功后的返回数据
		    const responseData = JSON.parse(res.data);
		    console.log(responseData.data);
		    this.image = responseData.data; // 将返回的单个图片数据作为数组元素
		    console.log(this.image)
		    console.log('上传成功');
			this.saveheadsculpture()

		  } catch (error) {
		    console.error(error);
		    // this.$api.msg('上传图片失败');
		  }
		},
		async saveheadsculpture(){
			console.log(this.image)
			let data={
				account_user:this.userinfo.account_user,
				photo_user:this.image
			}
			let res=await _modifyname(data);
			console.log(res);
			if(res.flag==true){
				this.headsculpture=this.image
			}
		}
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group_2 {
      padding: 8.33rpx 33.33rpx 58.33rpx;
      overflow-y: auto;
      .font_2 {
        font-size: 20.83rpx;
        font-family: SourceHanSansCN;
        line-height: 18.75rpx;
        color: #a6a6a6;
      }
      .text_5 {
        margin-left: 8.33rpx;
		margin-bottom: 4rpx;
      }
      .section {
        margin-top: 55.5rpx;
        padding: 8.17rpx 16.67rpx;
        background-color: #ffffff;
        // border-radius: 12.5rpx;
        // border: solid 2.08rpx #138f872b;
        .image_6 {
          margin-right: 12.5rpx;
          border-radius: 50%;
          width: 70rpx;
          height: 70rpx;
        }
      }
      .section_2 {
        margin-top: 55.5rpx;
        padding: 16.67rpx 4.17rpx 16.67rpx 16.67rpx;
        background-color: #ffffff;
        // border-radius: 12.5rpx;
        // border: solid 2.08rpx #138f872b;
        .space-x-20 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 41.67rpx;
          }
        }
      }
      .image_5 {
        width: 50rpx;
        height: 50rpx;
      }
      .font_3 {
        font-size: 31.25rpx;
        font-family: SourceHanSansCN;
        line-height: 29.17rpx;
        color: #383838;
      }
	  .pos {
	    position: absolute;
	    left: -150px;
	    right: 0px;
	    top: 185px;
	    bottom: 0px;
	  }
      .section_3 {
        margin-top: 55.5rpx;
        padding: 20.83rpx 16.67rpx 12.5rpx;
        background-color: #ffffff;
        // border-radius: 12.5rpx;
        // border: solid 2.08rpx #138f872b;
        .group_3 {
          margin-top: 12.5rpx;
          .image_7 {
            width: 14.58rpx;
            height: 25rpx;
          }
        }
        .space-x-8 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 16.67rpx;
          }
        }
        .font_5 {
          font-size: 31.25rpx;
          font-family: YOUSHEhaoshenti;
          line-height: 29.17rpx;
          color: #a6a6a6;
        }
        .text_7 {
          margin-right: 41.67rpx;
          margin-top: 8.33rpx;
          line-height: 30.21rpx;
        }
      }
      .space-x-18 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 37.5rpx;
        }
        .text_6 {
          margin-top: 8.33rpx;
        }
      }
      .group_4 {
        padding-top: 41.67rpx;
        .text_8 {
          margin-left: 16.67rpx;
		  margin-bottom: 16rpx;
          line-height: 19.79rpx;
        }
        .section_4 {
			margin-top: 55.5rpx;
          padding: 20.83rpx 20rpx 20.5rpx 25rpx;
          background-color: #ffffff;
          // border-radius: 12.5rpx;
          // border: solid 2.08rpx #138f872b;
          .space-y-6 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-top: 12.5rpx;
            }
            .text_9 {
              line-height: 19.79rpx;
            }
          }
          .switch {
            border-radius: 75rpx;
            width: 68.75rpx;
            height: 37.5rpx;
          }
        }
      }
      .space-y-4 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 8.33rpx;
        }
        .text_10 {
          line-height: 19.79rpx;
		  margin-bottom: 6rpx;
        }
        .section_5 {
		  margin-top: 55.5rpx;
          padding: 16.67rpx;
          background-color: #ffffff;
          // border-radius: 12.5rpx;
          // border: solid 2.08rpx #138f872b;
          .space-x-6 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 12.5rpx;
            }
          }
          .text_11 {
            margin-right: 8.33rpx;
          }
        }
      }
      .font_4 {
        font-size: 31.25rpx;
        font-family: YOUSHEhaoshenti;
        line-height: 25rpx;
		margin-right: 10px;
        color: #a6a6a6;
      }
      .text_13 {
        color: #000000;
        font-size: 34rpx;
        font-family: SourceHanSansCN;
        line-height: 38.54rpx;
      }
    }
    .space-y-31 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 64.58rpx;
      }
    }
  }
  .input-container {
    display: flex;
    align-items: center;
  }
  
  .input-container .font_4 {
    flex-grow: 1;
  }
  
  .input-container input {
    text-align: right;
  }

</style>